<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中国梦想游首页</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/imgtoggle.js"></script>
    <link href="css/ft-carousel.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ft-carousel.min.js"></script>
    <style>

        .example {width: 1000px;height: 500px;text-align: center;margin: 20px auto;background-color: #464576;}
       /* .carousel-item{line-height: 336px;color: #fff;font-family:  Arial Black}*/

    </style>
<script type="text/javascript">
window.onload=function(){
    var iTgl=new k_iToggle();
        iTgl.init({
            boxId:'box',
            numId:'num',
            imgId:'imgs',
            isAuto:true,
            aCls:'act',
            iCls:'imgs1',
            direct:'crt'
        });
        chg(iTgl,'chg');
        _auto(iTgl,'auto_1');
        
    //改变方向
    function chg(o,id){
        $('#'+id).click(function(){
            if(o.direct()=='crt'){
                o.direct('lvl');
                $(this).text('纵向');
            }else{
                o.direct('crt');
                $(this).text('横向');
            }
        });
    }
    
    function _auto(o,id){
        $('#'+id).click(function(){
            if(o.isAuto){
                o.isAuto=false;
                $(this).text('自动播放已停止');
            }else{
                o.isAuto=true;
                o.auto();
                $(this).text('自动播放');
            }
        });
    }
}
</script>
<script type="text/javascript"> 
    $(function(){
        var wweya_li =$("div.tab_menu ul li");
        wweya_li.click(function(){
        $(this).addClass("selected")            
         .siblings().removeClass("selected");  
            var index =  wweya_li.index(this); 
        $("div.tab_box > div")  
        .eq(index).show(100)   
            .siblings().hide(); 
                }).hover(function(){
            $(this).addClass("hover");
        },function(){
            $(this).removeClass("hover");           
        });
    });
</script>
</head>
<body>
<div class="top_hw clearfix">
    <div class="top_h clearfix">
        <div class="top_hl"><span>欢迎来到中国梦想游，让你的梦想全程免费自由行！</span> 预定热线：<b>0111-123456789</b></div>
        <div class="top_hr"><a th:if="${session.userName==null}" th:href="@{/register}">会员注册</a>  |  <span th:if="${session.userName!=null}" th:text="'欢迎你，'+${session.userName}"></span><a th:if="${session.userName==null}" th:href="@{/goLogin}">登录</a>  |  <a th:if="${session.userName!=null}" th:href="@{/goLogout}">退出</a></div>
    </div>
</div>
<div class="head_w">
    <div class="head_t clearfix">
        <div class="logo"><img src="images/logo.jpg"/></div>
        <div class="rx_line"><img src="images/rx.jpg"/></div>
    </div>
</div>
<div class="mainNav clearfix">
    <ul class="Nav_ul">
        <li  class="cur"><a th:href="@{/}">首页</a><img src="images/nav_line.jpg"/></li>
        <li><a th:href="@{/travelRoute}">旅游路线</a><img src="images/nav_line.jpg"/></li>
        <li><a th:href="@{/travelSpot}">旅游景点</a><img src="images/nav_line.jpg"/></li>
        <li><a th:href="@{/hotelAccommodation}">餐饮住宿</a><img src="images/nav_line.jpg"/></li>
        <li ><a th:href="@{/car}">旅游车票</a><img src="images/nav_line.jpg"/></li>
        <li ><a th:href="@{/insurance}">旅游保险</a><img src="images/nav_line.jpg"/></li>
        <li ><a th:href="@{/strategy}">旅游攻略</a><img src="images/nav_line.jpg"/></li>
        <li><a th:href="@{/attention}">注意事项</a><img src="images/nav_line.jpg"/></li>
        <li th:if="${session.userName!=null}"><a th:href="@{/userCenter}">会员中心</a><img src="images/nav_line.jpg"/></li>
    </ul>
</div>




<div class="example" style="width: 1000px;height: 500px">
    <div class="ft-carousel" id="carousel_1">
        <ul class="carousel-inner">
            <li class="carousel-item"><img src="images/aa3.jpg" /></li>
            <li class="carousel-item"><img src="images/aa4.jpg" /></li>
            <li class="carousel-item"><img src="images/aa7.jpg" /></li>



        </ul>
    </div>
</div>
<script>

    $("#carousel_1").FtCarousel();

</script>

</body>
</html>
